<template>
	<view class="wrapper">
		<searchCom :otherText="otherText" @searchChange="getSearchPOI" @searchClick="getSearchPOI" style="height: 80rpx;"></searchCom>
		<map id="map" @tap="maptap" :markers="markers" @regionchange="mapChange" :longitude="longitude" :latitude="latitude" style="width: 100%;height: 800rpx;"></map>
		<scroll-view class="search-list" scroll-y="true">
			<view class="address-list">
			    <view class="list" v-for="item in area_list" :key="item.uid" @click="areaFun(item)">
					<view class="item">
					    <view class="item-title">{{item.name}}</view>
					    <view class="item-address">{{item.address}}</view>
					</view>
			    </view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import searchCom from '../../components/search/searchCom.vue'
	export default {
		data() {
			return {
				mapContext:'',//地图对象
				otherText:'搜索地点',
				keyword: "", // 搜索关键字
				latitude: "22.502388",
				longitude: "113.921039",
				city: "",
				area_list: [], // 地址列表
				markers: [{
					id:1,
					latitude: "22.502388",
					longitude: "113.921039",
					iconPath: "../../static/img/chaomengcanyin_map_z.png"
				}]
			}
		},
		onLoad:function(){
			this.init()
		},
		methods: {
			searchFun:function(data){
				console.log(data)
			},
			async init(){
				this.mapContext = uni.createMapContext("map");
				let that = this;
				cm.singleLocation({
					success:function(res){
						console.log(JSON.parse(res));
						let location = JSON.parse(res).data;
						that.latitude = location.latitude;
						that.longitude = location.longitude;
						that.city = location.city;
						//地图中心点位置如果发生变化，则中心标志也跟着平移
						that.mapContext.translateMarker({
							markerId:1,
							destination:{
								latitude: that.latitude,
								longitude: that.longitude
							},
							duration:0
						})
						that.getSearchPOIAround('');
					},
					fail:function(res){
						console.log(res)
					}
				})
			},
			maptap:function(e){
				// this.markers.push({
				// 	id:'1',
				// 	latitude: '22.502388',
				// 	longitude: '113.921039',
				// 	iconPath: 'https://mex.triumen.cn//html/static/img/my_role.png'
				// })
			},
			//获取指定坐标周围地址
			getSearchPOIAround:function(key){
				let that = this;
				cm.searchPOIAround({
					latitude: that.latitude,
					longitude: that.longitude,
					keywords: key,
					sortrule: "0",
					success:function(res){
						console.log('success')
						res = JSON.parse(res);
						console.log(res);
						if(res.code == 0){
							that.area_list = res.data;
						}
					},
					fail:function(res){
						console.log('fail')
						console.log(res)
					}
				})
			},
			//搜索地址
			getSearchPOI:function(data){
				console.log(data);
				let that = this;
				cm.searchPOI({
					keywords:data.searchComval,
					city:that.city,					cityLimit: "1",					success:function(res){
						console.log('success')
						res = JSON.parse(res)
						console.log(res);
						if(res.code == 0){
							that.area_list = res.data;
						}
					},
					fail:function(res){
						console.log('fail')
						console.log(res)
					}
				})
			},
			//获取地图中心点位置
			mapChange:function(data){
				// console.log(data);
				let that = this;
				this.mapContext.getCenterLocation({
					success:(res)=>{
						console.log(res)
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.getSearchPOIAround();
						
						//地图中心点位置如果发生变化，则中心标志也跟着平移
						that.mapContext.translateMarker({
							markerId:1,
							destination:{
								latitude: that.latitude,
								longitude: that.longitude
							},
							duration:100
						})
					}
				})
			},
			//点击获取位置
			areaFun:function(item){
				this.$store.commit("merchantver/setLocation", item);
				// this.$router.back();
				uni.navigateBack({
					
				})
			}
		},
		components:{
			searchCom
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper{
		height: 100%;
	}
	.search-list {
		// height: 30%;
		height: 640rpx;
		.address-list{
			.list{
				padding: 30rpx;
				border-bottom: 1rpx solid #E5E5E5;
				.item{
					.item-title{
						font-size: 32px;
						font-weight: 700;
						color: #333;
					}
				}
			}
		}
	}
</style>